<script lang="ts">
	import { imageBasePath } from '$store/g';
	import RetinaBgImage from '$lib/RetinaBgImage.svelte';
	let styleVars = {
		'product-pricing-yes-url': `url('${$imageBasePath}/product-pricing-yes.png')`,
		'product-pricing-no-url': `url('${$imageBasePath}/product-pricing-no.png')`
	};
	$: cssVars = Object.entries(styleVars)
		.map(([key, value]) => `--${key}:${value}`)
		.join(';');
</script>

<RetinaBgImage
	imgSrc="{$imageBasePath}/product-pricing-top-bg.png"
	img2xSrc="{$imageBasePath}/product-pricing-top-bg@2x.png"
	alt="product-pricing-top-bg"
	classes="w-full h-[358px] bg-no-repeat bg-cover bg-center"
>
	<div class="w-[352px] mx-auto pt-12 text-[32px] font-semibold">先创建品牌，再开通商城</div>
	<div class="w-[196px] mx-auto pt-3 text-base text-[#999999]">现在开通即享30天免费试用</div>
	<div class="pt-8 w-36 mx-auto">
		<a
			class="rounded-[37.5px] px-4 py-2 bg-primary text-white flex justify-center items-center w-36 h-12"
			href="void:(0)">免费体验</a
		>
	</div>
</RetinaBgImage>
<div class="absolute top-[311px] w-[1440px]" style={cssVars}>
	<div class="pt-[47px] mx-auto w-[1056px] h-[900px] grid grid-cols-2 gap-[56px]">
		<div class="bg-white border-solid">
			<RetinaBgImage
				imgSrc="{$imageBasePath}/product-pricing-free-ver.png"
				img2xSrc="{$imageBasePath}/product-pricing-free-ver@2x.png"
				alt="product-pricing-free-ver"
				classes="w-[500px] h-[240px] bg-no-repeat bg-cover bg-center"
			>
        <div class="w-[102px] h-8 bg-[#ffc35a] text-white text text-center leading-8 opacity-80 rounded-tl-lg rounded-br-lg">有效期30天</div>
				<div class="pt-20 w-[125px] mx-auto text-primary tracking-[5.6px] font-semibold text-4xl">免费版</div>
				<div class="pt-[12px] w-[122px] mx-auto text-[#16CA66] opacity-80">适合2人以下团队</div>
			</RetinaBgImage>
			<div class="border broder-[#E5E5E5] rounded-b-2xl pt-[19px] px-8">
				<ul class="grid grid-flow-row grid-rows-[13] gap-6">
					<li class="module yes">品牌数</li>
					<li class="module yes">店铺</li>
					<li class="module yes">员工数</li>
					<li class="module yes">仓库</li>
					<li class="module yes">商品数</li>
					<li class="module yes">统计</li>
					<li class="module yes">客户</li>
					<li class="module yes">营销</li>
					<li class="module yes">商城小程序</li>
					<li class="module yes">星团小程序</li>
					<li class="module no">商城装修</li>
					<li class="module no">直播卖货</li>
					<li class="module no">1V1人工服务</li>
				</ul>
				<div class="my-8">
					<a
						class="border border-solid border-primary rounded-[9px] bg-white text-primary flex justify-center items-center w-[436px] h-16"
						href="void:(0)">免费使用</a
					>
				</div>
			</div>
		</div>
		<div class="bg-white">
			<RetinaBgImage
				imgSrc="{$imageBasePath}/product-pricing-pro-ver.png"
				img2xSrc="{$imageBasePath}/product-pricing-pro-ver@2x.png"
				alt="product-pricing-pro-ver"
				classes="w-[500px] h-[240px] bg-no-repeat bg-cover bg-center"
			>
				<div class="pt-20 w-[125px] mx-auto text-white tracking-[5.6px] font-semibold text-4xl">专业版</div>
				<div class="pt-[12px] w-[96px] mx-auto text-white opacity-80">适合中小团队</div>
			</RetinaBgImage>
			<div class="border broder-[#E5E5E5] rounded-b-2xl pt-[19px] px-8">
				<ul class="grid grid-flow-row grid-rows-[13] gap-6">
					<li class="module yes">品牌数</li>
					<li class="module yes">店铺</li>
					<li class="module yes">员工数</li>
					<li class="module yes">仓库</li>
					<li class="module yes">商品数</li>
					<li class="module yes">统计</li>
					<li class="module yes">客户</li>
					<li class="module yes">营销</li>
					<li class="module yes">商城小程序</li>
					<li class="module yes">星团小程序</li>
					<li class="module yes">商城装修</li>
					<li class="module yes">直播卖货</li>
					<li class="module yes">1V1人工服务</li>
				</ul>
				<div class="my-8">
					<a
						class="border border-solid border-primary rounded-[9px] bg-primary text-white flex justify-center items-center w-[436px] h-16"
						href="void:(0)">联系咨询</a
					>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="h-[991px]" />

<style lang="scss">
	.module {
		@apply flex items-center justify-between;
		&::after {
			@apply bg-no-repeat bg-contain bg-center w-[19px] h-4;
			content: '';
		}
	}
	.yes {
		&::after {
			background-image: var(--product-pricing-yes-url);
		}
	}
	.no {
		&::after {
			background-image: var(--product-pricing-no-url);
		}
	}
</style>
